<template>
  <Card :shadow="shadow">
    <div class="card-name">
      <div class="name width1">余额变更</div>
    </div>
    <div class="content-con">
      <div class="capital-money">
        <div class="capital-money-item">
          账户余额：<span class="list2">{{userinfo.now_money}}</span>元
          代付余额：<span class="list2">{{userinfo.paid_money}}</span>元
          冻结金额：<span class="list3">{{userinfo.frozen_money}}</span>元
          保证金额：<span class="list3">{{userinfo.earnest_money}}</span>元
        </div>
      </div>
      <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="150"
        class="change-item">
        <Form-item label="商户ID" prop="uid">
          <i-input v-model="formValidate.uid" size="large" readonly></i-input>
        </Form-item>
        <Form-item label="账户类型" prop="account_type">
          <Radio-group v-model="formValidate.account_type" size="large" vertical>
            <Radio label="0">
              <span>代付余额</span>
            </Radio>
            <Radio label="1">
              <span>冻结金额</span>
            </Radio>
            <Radio label="2">
              <span>保证金额</span>
            </Radio>
          </Radio-group>
        </Form-item>
        <Form-item label="变更金额(元)" prop="money">
          <i-input v-model="formValidate.money" size="large" placeholder="请输入金额"></i-input>
        </Form-item>
        <Form-item label="操作备注" prop="mark">
          <i-input v-model="formValidate.mark" size="large" placeholder="请输入加减款原因备注"></i-input>
        </Form-item>
        <Form-item label="超级密码" prop="pw" v-show="payMode === 0 || payMode === 2">
          <i-input v-model="formValidate.pw" type="password" password  size="large" placeholder="请输入超级密码"></i-input>
        </Form-item>
        <Form-item label="谷歌验证码" prop="vcode" v-show="payMode === 1 || payMode === 2">
          <i-input v-model="formValidate.vcode"  size="large" placeholder="请输入谷歌验证码"></i-input>
        </Form-item>
        <div class="ban-btn">
          <i-button class="add save" :loading="loading" @click="add" size="large">增加金额</i-button>
          <i-button class="sub save" :loading="loading" @click="sub" size="large">减少金额</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </div>
      </i-form>
    </div>
  </Card>

</template>
<script>
import {
  change, list
} from '@/api/merchants'
import { mapMutations } from 'vuex'
export default {
  name: 'mer-change',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入超级密码'))
      }
      // else if (value !== this.pw) {
      //   callback(new Error('超级密码不正确！'));
      // }
      else {
        callback()
      }
    }
    return {
      userinfo: {},
      formValidate: {
        uid: this.$route.params.row.uid,
        account_type: '0',
        admin_id: this.$store.state.user.userInfo.id,
        money: '',
        mark: '',
        pw: '',
        bc_type: '',
        vcode: ''
      },
      ruleValidate: {
        account_type: [{
          required: true,
          message: '请选择状态',
          trigger: 'change'
        }],
        money: [{
          required: true,
          message: '请输入金额',
          trigger: 'blur'
        }],
        mark: [{
          required: true,
          message: '请输入加减款原因备注',
          trigger: 'blur'
        }]
        // pw: [{
        //   validator: validatePassCheck,
        //   trigger: 'blur'
        // }]

      },
      payMode: this.$store.state.user.userInfo.pay_safemode,
      loading: false
    }
  },
  created () {
    this.userinfo = this.$route.params.row
  },
  mounted () {
    this.payModeinit()
  },
  methods: {
    payModeinit () {
      if (this.payMode === 0) {
        this.ruleValidate.pw = {
          required: true,
          message: '请输入超级密码',
          trigger: 'blur'
        }
      }
      if (this.payMode === 1) {
        this.ruleValidate.vcode = {
          required: true,
          message: '请输入6位谷歌验证码',
          trigger: 'blur'
        }
      }
      if (this.payMode === 2) {
        this.ruleValidate.pw = {
          required: true,
          message: '请输入超级密码',
          trigger: 'blur'
        }
        this.ruleValidate.vcode = {
          required: true,
          message: '请填写6位谷歌验证码',
          trigger: 'blur'
        }
      }
    },
    ...mapMutations([
      'closeTag'
    ]),
    close () {
      this.closeTag({
        name: 'mer-change',
        params: {
          row: this.$route.params.row
        }
      })
    },
    // 返回按钮
    btnClick1 () {
      this.close()
    },
    // 表单验证
    add () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.$Modal.confirm({
            title: '确认信息',
            content: '确定为商户增加(' + this.formValidate.money + '元)金额么？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
              this.loading = !this.loading
              this.formValidate.bc_type = 'add'
              change(this.formValidate).then(res => {
                this.$Message.success(res.msg)
                this.loading = !this.loading
                setTimeout(() => this.close(), 1000)
              }).catch(err => {
                this.$message.error(err.msg)
                this.loading = !this.loading
              })
            }
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    sub () {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.$Modal.confirm({
            title: '确认信息',
            content: '确定为商户增加(' + this.formValidate.money + '元)金额么？',
            okText: '确认',
            cancelText: '取消',
            onOk: async () => {
              this.loading = !this.loading
              this.formValidate.bc_type = 'sub'
              change(this.formValidate).then(res => {
                this.$Message.success(res.msg)
                this.loading = !this.loading
                setTimeout(() => this.close(), 1000)
              }).catch(err => {
                this.$message.error(err.msg)
                this.loading = !this.loading
              })
            }
          })
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    }
  }
}
</script>
<style lang="less">
  .change-item {
    width: 50%;
  }

  .change-item .ivu-form-item-label {
    font-size: 14px;
  }
</style>
